<template>
	<view class="u-flex u-col-center tab">
		<scroll-view scroll-x="true" class="scroll-box">
			<view class="item" v-for="item,index of tabs" :key="index">
				<view class="content u-flex-col u-col-center" @click="clickItem(item)">
					<u-image :src="item.image" :lazy-load="true" width="86" height="86"></u-image>
					<text class="title">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				tabs: []
			};
		},
		methods: {
			...mapActions(['isInPage']),
			loadTab(){
				return this.$api.tab.index({category: 'home'})
				.then(res=>{
					if(res.code == 1)
						this.tabs = res.data
				})
			},
			clickItem(item){
				this.$emit('clickItem',{item})
				this.isInPage(item.path)
				.then(()=>this.$tools.routerPush(item.path))
				.catch(()=>this.$tools.routerPushTab(item.path))
			}
		},
		mounted() {
			this.loadTab()
		}
	}
</script>

<style lang="scss" scoped>
	.tab{
		height: 212rpx;
		background-color: $uni-bg-color;
		.scroll-box{
			height: 135rpx;
			white-space: nowrap;
			.item{
				display: inline-block;
				padding-right: 88rpx;
				&:last-child{
					padding-right: 24rpx;
				}
				&:first-child{
					padding-left: 24rpx;
				}
				.title{
					padding-top: 14rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
